<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情页面</title>
    <!--bootstrap-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/HttpUtil.js"></script>
    <script src="js/CacheUtil.js"></script>
</head>
<body>
<!--页眉-->
<div  id="header"></div>
<div class="row col-xs-12 ">
    <div class="col-xs-6 col-xs-offset-3" >
        <div class="thumbnail" id="div_product_Detail"></div>
    </div>
</div>

<template id="template_productDetail">
    <img src="{picture}"  alt="...">
    <div class="caption">
        <h3>{name}</h3>
        <p class="productId">商品ID：<span >{id}</span></p>
        <p class="productPrice">价格：<span>{price}</span>元</p>
        <p>评分：{star}(满分5分)</p>
        <p>库存：{repertory}件</p>
        <p>商品介绍：{info}</p>
        <p>
            <a href="#" class="btn btn-warning" role="button" data-id="{id}" onclick="joinCollection(this)">加入收藏</a>
            <a href="/shop-app/addCartSuccess.html" class="btn btn-danger addCart" role="button" >加入购物车</a>
            <a href="/shop-app/addCartSuccess.html" class="btn btn-danger addCart" role="button">直接购买</a>
        </p>
    </div>
</template>


<script>
    $(function () {
        getProductDetail();
    })
    //添加收藏
    function joinCollection(e){
        //获取商品id
        let productId = $(e).attr("data-id");
        // console.log("productId:"+productId)
        let loginUser = getLoginUser();
        let userId = loginUser.userId;
        intoCollection(productId,userId);
    }
    function intoCollection(productId,userId){
        let url = "/product/insertProductCollection";
        let params={
            productId:productId,
            userId:userId,
        }
        httpPost(url,params,function (data) {
            console.log(data)
            alert("添加收藏成功")
        })
    }

    //添加进入购物车
    $(document).on('click', '.addCart' , function () {
       let productId = $(this).parent().siblings(".productId").children().text();
       console.log(productId);
       let productPrice = $(this).parent().siblings(".productPrice").children().text();
        console.log(productPrice);
       addCart(productId,productPrice);
    })

    function addCart(productId,productPrice) {
        let url = "/cart/addCart";
        let loginUser = getLoginUser();
        let userId = loginUser.userId;
        let params={
            productId:productId,
            userId:userId,
            price:productPrice
        }
        console.log(params);
        httpPost(url,params,function (data) {
            console.log(data)
        })
    }

    function getQueryString(name) {
        //获取地址栏url的参数
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }

    function getProductDetail() {
        let id=getQueryString("id");
        let url = "/product/showProductById";
        let params={
            productId:id,
        }
        console.log(params);
        httpGet(url,params,function (data) {
            renderingProductDetail(data);
            console.log(data)
        })
    }

    function renderingProductDetail(product) {
        console.log(product)
        let templateProductDetailHtml = $("#template_productDetail").html();
        let productDetailHtml;
        //遍历商品列表
            //后台数据填充到模板
        productDetailHtml=templateProductDetailHtml.replace(/{name}/g,product.name)
                .replace(/{info}/g,product.info)
                .replace(/{id}/g,product.productId)
            .replace(/{price}/g,product.price)
            .replace(/{star}/g,product.star)
            .replace(/{repertory}/g,product.repertory)
            .replace(/{picture}/g,product.picture);
        console.log(productDetailHtml);
        $("#div_product_Detail").html(productDetailHtml);
    }


</script>
<script>
    $(document).ready(function(){
        $("#header").load("header.html");
    });
</script>
</body>
</html>